const HtmlWebpackPlugin = require('html-webpack-plugin');
const {
  srcDir,
  distDir,
  entryPath,
  templatePath,
  alias,
} = require('./path');

module.exports = {
  entry: {
    main: entryPath,
  },

  output: {
    path: distDir,
  },

  resolve: {
    extensions: ['.js', '.jsx'],
    alias,
  },

  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        include: srcDir,
        loader: 'babel-loader',
      },
      {
        test: /\.(png|jpg|jpeg|gif)$/,
        use: {
          loader: 'url-loader',
          options: {
            name: '[name]_[hash:5].[ext]',
            outputPath: 'img',
            limit: 10000,
          },
        },
      },
    ],
  },

  optimization: {
    usedExports: true, // tree shaking
    runtimeChunk: {
      name: 'manifest', // 映射关系单独打包
    },
    splitChunks: {
      chunks: 'all',
      minSize: 30000, // 超过30kb就单独分割出一个chunk
      cacheGroups: {
        antdui: {
          test: /[/]node_modules[/]antd|@ant-design[/]/,
          priority: 0, // 分组的优先级，值越大优先级越高
          name: 'antdui',
        },
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10,
          name: 'vendors',
        },
      },
    },
  },

  plugins: [
    new HtmlWebpackPlugin({
      template: templatePath,
    }),
  ],
};
